<template>
  <div style="width: 100%; height: 100%;">
    <div class="treeHeaders gis-tree-header">
      <img src="@/assets/guangboimg/广播分区.png" alt="" />
      <el-icon
        size="18"
        color="#fff"
        style="font-size: 20px"
        class="icons iconfont icon-biaoti"
      ></el-icon>
      <span style="font-weight: 700; margin-left: 5px">广播分区</span>
    </div>

    <el-tree
      ref="treeRef"
      style="margin-top: 40px;"
      :default-expand-all="true"
      :data="state.data"
      node-key="id"
      highlight-current
      :props="state.defaultProps"
      @node-click="handleNodeClick"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node name">
          <span class="iconfont" v-if="data.children || shouye == 'shouye'">
            <!-- <img class="image" src="@/assets/guangboimg/tree1.png" alt="" /> -->
            <el-icon
              size="18"
              class="icons iconfont icon-tree1 blue"
            ></el-icon>
          </span>
          <span class="iconfont" v-else>
            <!-- <img class="image" src="@/assets/guangboimg/tree2.png" alt="" /> -->
            <el-icon
              size="18"
              class="icons iconfont icon-tree2 blue"
            ></el-icon>
          </span>
          <span style="font-size: 14px" class="themfontColor">{{
            node.label
          }}</span>
        </span>
        <!-- <span >（{{ fn(node)}}） <span>{{ fn2(node) }}</span></span>  var(--default-background)-->
        <span v-if="fn(node) !== '0'" class="themfontColor"
          ><span v-if="allfn(node) !== '全部'"
            >（<span>{{ fn(node) }}</span
            >）</span
          ></span
        >
        <span v-else style="margin-left: 5px">
          <el-button
            :disabled="cameraFlag"
            @click="addFn(node)"
            v-if="!fn2(node)"
            type="text"
          >
            <img src="@/assets/guangboimg/添加视频.png" alt="" />
          </el-button>
          <el-button
            :disabled="cameraFlag"
            @click="delFn(node)"
            v-else
            type="text"
            style="color: red"
          >
            <img src="@/assets/guangboimg/移除视频.png" alt="" />
          </el-button>
        </span>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import { reactive, defineProps, onMounted, nextTick } from "vue";
const { proxy } = getCurrentInstance();

const props = defineProps({
  treeData: {
    type: Array,
    default: [],
  },
  cameraFlag: {
    type: Boolean,
    default: false,
  },
  shouye: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["handleNodeClick"]);
let state = reactive({
  data: props.treeData,
  defaultProps: {
    children: "children",
    label: "label",
  },
});
const handleNodeClick = (node, data) => {
  emit("handleNodeClick", node);
  // console.log(node, 'node')
  // console.log(data, 'data')
};
const fn = (e) => {
  return e.data.value;
};
const allfn = (e) => {
  return e.data.label;
};
const fn2 = (e) => {
  return e.data.cameraFlag;
};
const addFn = (node) => {
  emit("addFn", node.data);
};
const delFn = (node) => {
  emit("delFn", node.data);
};
onMounted(() => {
  setTimeout(() => {
    state.data = props.treeData;
  }, 500);
  setTimeout(() => {
    proxy.$refs.treeRef.setCurrentKey(state.data[0].id);
  }, 1000);
});
</script>

<style scoped lang="scss">
.treeHeaders {
  width: 200px;
  z-index: 999;
  position: absolute;
  top: 0;
  display: flex;
  margin-bottom: 10px;
  letter-spacing: 5px;
  padding: 5px;
}
.gis-tree-header {
  border-radius: 6px 6px 0 0;
  color: #fff;
  background-color: #2A84EB;

}
.dark {
  :deep(.el-tree-node__content:hover) {
    background-color: rgba(255, 255, 255, 0.2);
  }

  :deep(
      .el-tree--highlight-current
        .el-tree-node.is-current
        > .el-tree-node__content
    ) {
    background-color: rgba(255, 255, 255, 0.2) !important;
  }

  :deep(.el-tree-node:focus > .el-tree-node__content) {
    background-color: rgba(255, 255, 255, 0.2);
  }
}

.name {
display: flex;
align-items: center;
  .iconfont {
    vertical-align: middle;
    margin-right: 5px;
  }
}

:deep(.el-tree) {
  background-color: initial !important;
}
:deep(.el-tree-node > .el-tree-node__children) {
  overflow: visible;
}
.blue {
  color: #2a84eb;
}
</style>